<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue to do list</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .name-list{
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="app">
            <h2 class="text-center">{{title}}</h2>
            <p class="input-group">
                <button class="btn btn-default title_show_handle" v-on:click="title_show_handle">点击<span v-text="button_title"></span></button>
            </p>
            <div v-show="title_show">
                <p class="input-group">
                    <input type="text" class="form-control" v-bind:placeholder="placeholder" v-model:value="input_name" v-on:keyup.enter="add_name_handle">
                    <span class="input-group-btn">
                        <button class="btn btn-default add_name_handle" type="button" v-on:click="add_name_handle">确认</button>
                    </span>
                </p>
                <ul class="list-group name-list">
                   <li data-toggle="tooltip" data-placement="top" title="点击删除" class="list-group-item" v-for="(value,key) of data_list" :key="key" v-on:click="delete_handle(key)">{{value.title}}</li>
                </ul> 
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <script>
        var button_title_toggle=['隐藏','显示'];
        var placeholder_default='输入名字';
        // 注入 Ajax-备注：不注入亦可直接使用 $.ajax 进行 Ajax 操作
        Vue.prototype.ajax=function(ajax){
            return $.ajax(ajax);
        }
        var app=new Vue({
            el:"#app",
            data:{
                title:'Hello World! My name is Vue todolist.',
                placeholder:placeholder_default,
                title_show:true,
                button_title:button_title_toggle[0],
                data_list:[],
                input_name:'',
            },
            mounted:function(){
                // console.log('初始化列表数据');
                this.get_data_handle();
            },
            updated:function(){
                // console.log('动态绑定 jQery 特效');
                $('[data-toggle="tooltip"]').tooltip();
            },
            methods:{
                get_data_handle:function(){
                    var that=this;
                    $.ajax({
                        url: './data_list.php',
                        type: 'get',
                        success: function (back) {
                            var data = back.data;
                            var info = back.info;
                            // console.log(info);
                            data.forEach(function (value,index){
                                that.data_list.push(value);
                            });
                        },
                        error: function () {
                            console.log('网络不稳定，加载失败...');
                        },
                    });
                },
                title_show_handle:function(){
                    this.title_show=!this.title_show;
                },
                add_name_handle:function(){
                    if(!this.input_name){
                        return;
                    }
                    this_title=this.input_name;
                    this.data_list.push({title:this_title});
                    this.input_name='';
                },
                delete_handle:function(key){
                    this.data_list.splice(key,1);
                    $('[data-toggle="tooltip"]').tooltip("hide");
                }
            },
            watch:{
                title_show:function(){
                    this.button_title=button_title_toggle[Number(!this.title_show)];
                }
            }
        });
        // // jQuery 操作-可以封装入 Vue 实例中
        // $(function(){
        //     $.ajax({
        //         url:'./data_list.php',
        //         type:'get',
        //         success:function(back){
        //             var data=back.data;
        //             var info=back.info;
        //             app.$data.data_list=data;
        //             console.log(info);
        //         },
        //         error:function(){
        //             console.log('网络不稳定，加载失败...');
        //         },
        //     });
        // });
        $(function(){
            console.log('总结：看来我也就是想要一个 JavaScript 模板引擎。🤣');
        });
        // Bootstrap 气泡-在不添加 updated 方法是可以使用这种方法
        // $("body").mouseover(function () {
        //     $('[data-toggle="tooltip"]').each(function () {
        //         $(this).tooltip();
        //     });
        // });
    </script>
</body>
</html>